<template>
	<div @click="closePrintingTips">
		<header>
			<h1 @click="back" style="cursor: pointer;">
				<img src="../assets/logo.png">
				<span>天津医科大学总医院</span>
			</h1>
			<ul id="poster">
				<li @click="nav_bar('all')" :class="{isActive: overviewShow}">
					全院总览
					<span></span>
				</li>
				<li @click="nav_bar('department')" :class="{isActive: departmentShow}">
					科室分析
					<span></span>
				</li>
				<li @click="nav_bar('person')" :class="{isActive: personShow}">
					个人分析
					<span></span>
				</li>
			</ul>
			<div class="button_operator" >
			 	<span @click="changeUploadStatusTips" style=" display: inline-block; width: 24px;height: 40px;">	
			 		<img src="../assets/dataerr.png" style="display: inline-block; width: 100%; height: 60%; position: relative;top: 5px;" v-if="totalStatus == 0">
			 		<img src="../assets/normal.png" style="display: inline-block; width: 100%; height: 60%; position: relative;top: 5px;" v-if="totalStatus == 1">
					<img src="../assets/ignore.png" style="display: inline-block; width: 100%; height: 60%; position: relative;top: 5px;" v-if="totalStatus == 2">
					<img src="../assets/caculate.png" style="display: inline-block; width: 100%; height: 60%; position: relative;top: 5px;" v-if="totalStatus == 3">
					<img src="../assets/caculating.png" style="display: inline-block; width: 100%; height: 60%; position: relative;top: 5px;" v-if="totalStatus == 4">
			 	</span>
		   	 	<span class="copy_fist" :class="{copy_ff: hovershow}" @click="liClick()">
			    	<img src="../assets/copy.png" v-if="!hovershow">
			    	<img src="../assets/copyy.png" v-else="hovershow">
			    	<span >打印</span>
			   </span>
			    <span class="logout"  @click="logout = true">
			    	<img src="../assets/logout.png">
			    </span>
		    </div>
			<el-date-picker v-model="time" type="month" :picker-options="pickerBeginDateAfter" 
							@change="timeChange" placeholder="选择月" @focus="saveTime" clear-icon="">
	    	</el-date-picker>
	  
		</header>

		<el-dialog :visible.sync="isShowUploadStatusTips" width="70%" @close="closeDialog">
			<div class="uploadStatusTipsContent">
				<!-- <div class="uploadStatusColseBtn">
					<span class="el-icon-close" @click="closeUploadStatusTips"></span>
				</div> -->
				<div class="uploadStatusTitle">
					<span>数据自检</span>
					<span> （{{time}}）</span>
				</div>
				<div class="uploadStatusTitleInfo">
					<ul>
						<li @click="titleChoose('medical')" :class="{active: isMedical}">医务处</li>
						<li @click="titleChoose('financial')" :class="{active: isFinancial}">财务处</li>
						<li @click="titleChoose('performance')" :class="{active: isPerformance}">绩效处</li>
						<li @click="titleChoose('personnel')" :class="{active: isPersonnel}">人事处</li>
						<!-- <li @click="titleChoose('message')" :class="{active: isMessage}">信息处</li> -->
					</ul>
				</div>
				<el-table
					:data="tableData"
					style="width: 100%"
					:header-cell-style="headerStyle"
					:cell-style="cellStyle"
					height="502"
					>
					<el-table-column
						align="center"
						prop="name"
						label="表名">
					</el-table-column>
					<el-table-column
						align="center"
						label="数据状态">
						<template slot-scope="scope">
							<div class="openNewWindow">
								<a :href="'#/preview/'+scope.row.id" target="_blank"  v-if="scope.row.status == 0">
									<img src="./../assets/statusErr.png">
								未上传</a>
								<a :href="'#/preview/'+scope.row.id" target="_blank"  v-if="scope.row.status == 1">
									<img src="./../assets/statusNomal.png">
								已上传</a>
								<a :href="'#/preview/'+scope.row.id" target="_blank" v-if="scope.row.status == 2">
									<img src="./../assets/statusErr.png" >
								部分数据异常</a>
								<a :href="'#/preview/'+scope.row.id" target="_blank" v-if="scope.row.status == 3">
									<img src="./../assets/statusIgnore.png" >
								部分数据被人工忽略</a>
								<a :href="'#/preview/'+scope.row.id" target="_blank" v-if="scope.row.status == 4">
									<img src="./../assets/statusNomal.png" >
								已计算</a>
								<a v-if="scope.row.status == 6" >
									<img src="./../assets/statusErr.png" >
								上传失败</a>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
		</el-dialog>

		<!-- <deletes @deleteCard="deleteCard" @sure="sure" @cancel="cancel" v-show="true">
			<div class="deletes_text">
				<span>是否退出登陆</span>
			</div>
		</deletes> -->
		<el-dialog
		  title="提示"
		  :visible.sync="logout"
		  width="30%"
		  >
		  <span style="width: 100%; text-align: center;">是否退出登陆</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="logout = false">取 消</el-button>
		    <el-button type="primary" @click="logOut">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>
<script>
// import  html2canvas from './common/html2canvas.js'
// import deletes from './common/delete';
import html2canvas from 'html2canvas';
import Vue from 'vue'
import axios from 'axios'
export default {
	data () {
		return {
			overviewShow: true,
			departmentShow: false,
			personShow: false,
			time: '',
			oldTime: '',
			kai: true,
			totalStatus: '',
			logout: false,
			hovershow: false,
			isMedical: true,
			isFinancial: false,
			isPerformance: false,
			isPersonnel: false,
			isMessage: false,
			pickerBeginDateAfter:{
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
			geshis: [
				{
					name: 'EXL格式',
					show: true
				},
				{
					name: 'JPG格式',
					show: false
				}
				// ,
				// {
				// 	name: 'PDF格式',
				// 	show: false
				// }
			],
			
			tableData: [],
			isShowUploadStatusTips: false 
		}	
	},
	created () {
		this.getDateTime()
		
		this.departmentShow = false
		this.personShow = false
		this.overviewShow = false
		var fullPath = this.$route.fullPath
		fullPath = this.$route.fullPath
		var test = /section-/
		if(this.$route.path.indexOf('/detail') > -1) {
			this.overviewShow = true
		} else if(this.$route.path.indexOf('-jixiao') > -1) {
			// alert("test")
			this.departmentShow = true
		}

		if (fullPath === '/all'|| fullPath === '/income' || fullPath === '/jixiaoall' ) {
			this.overviewShow = true
		} else if (test.test(fullPath)) {
			// alert(test.test(fullPath))
			this.departmentShow = true
		} else if( fullPath === '/person'){
			this.personShow = true
		}
	},
	computed:  {
		fullPath () {
			return this.$route.fullPath
		}
	},
	watch: {
		fullPath (newV, oldV) {
			this.departmentShow = false
			this.personShow = false
			this.overviewShow = false
		var test = /section-/
		if(this.$route.path.indexOf('/detail') > -1) {
			this.overviewShow = true
		} else if(this.$route.path.indexOf('-jixiao') > -1) {
			this.departmentShow = true
		}
			if (newV === '/all'  || newV === '/income' || newV === '/jixiaoall') {
				this.overviewShow = true
			} else if (test.test(newV)) {
				// alert(test.test(newV))
				this.departmentShow = true
			} else if( newV === '/person'){
				this.personShow = true
			} 
		}
	},
	methods: {
		saveTime () {
			this.oldTime = this.time
		},
		closeDialog () {
			this.isFinancial = false
			this.isPerformance = false
			this.isPersonnel = false
			this.isMedical = true
			if(this.totalStatus != 1) {
				this.time = this.oldTime
				this.timeChange()
			}
		},
		liClick () {
			if( this.hovershow == true) {
				this.hovershow = false
			} else {
				this.hovershow = true
			}
			this.$emit('liClick', 'JPG格式')
			
		
		},	
		logOut () {
			var qs = require('qs')
			var self = this
			self.logout = false
			axios.post('/service', qs.stringify({"data": JSON.stringify({
	              	command: 'logOut',
	              	platform: 'web',
	              	type: "dataSystem"
             		})
				}), {
              		headers: {
               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              			}
            }).then(function (rep) {
              	if (rep.data.statusCode === '10001') {
					self.$router.push('/login')
				}
            }).catch(function (error) {
              // console.log(error);
            })
		},
		back () {
			this.$route.push('/all')
		},
		getDateTime () {
    		var qs = require('qs')
			var self = this
			axios.post('/service', qs.stringify({"data": JSON.stringify({
	              	command: 'getDefaultMonth',
	              	platform: 'web'
             		})
				}), {
              		headers: {
               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              			}
            }).then(function (rep) {
              	if (rep.data.statusCode === '10001') {
					self.time = rep.data.data.monthTime
					self.$emit('timeChange', self.time)
					self.getUploadList("medical")
				}
            }).catch(function (error) {
              // console.log(error);
            })
		},
		timeChange () {
			// let a = '2018-01'
			var arrTest = [/Jan/, /Feb/, /Mar/,/Apr/,/May/,/Jun/,/Jul/,/Aug/,/Sep/,/Oct/,/Nov/,/Dec/]
			arrTest.forEach((item, index) => {
				if (item.test(this.time)){
					if (index < 9) {
						// a = String(this.time).substr(11, 4) + '-0' + (index + 1)
						this.time = String(this.time).substr(11, 4) + '-0' + (index + 1)
					} else {
						// a = String(this.time).substr(11, 4) + '-' + (index + 1)
						this.time = String(this.time).substr(11, 4) + '-' + (index + 1)
					}
				}
			})
			this.$emit('timeChange', this.time)
			this.getUploadList("medical")

		},
		nav_bar (type) {
			this.overviewShow = false
			this.departmentShow = false
			this.personShow = false
			type === 'all' ? this.overviewShow = true : type === 'department' ? this.departmentShow = true : this.personShow = true
			this.$emit('navbarClick', type)
		},
		closePrintingTips(){
			this.hovershow = false;
		},
		// liChooseTitle(item){
		// 	this.titleList.forEach((item) => {
		// 	this.getUploadList(item)
		// },
		headerStyle({row, column, rowIndex, columnIndex}){
			return {
				backgroundColor: '#D8EBF3',
				height: '70px',
				fontFamily: " PingFangSC-Regular",
				fontSize: "18px",
				color: "#333"
			}
		},
		cellStyle(){
			return {
				height: "72px",
				fontFamily: " PingFangSC-Regular",
				fontSize: "18px",
				color: "#333"
			}
		},
		titleChoose (item) {
			switch (item) {
				case 'medical':
				 	this.isMedical = true
				 	this.isFinancial = false
				 	this.isPerformance = false
				 	this.isPersonnel = false
				 	this.isMessage = false
					break
				case 'financial':
					this.isMedical = false
				 	this.isFinancial = true
				 	this.isPerformance = false
				 	this.isPersonnel = false
				 	this.isMessage = false
					break
				case 'performance':
					this.isMedical = false
				 	this.isFinancial = false
				 	this.isPerformance = true
				 	this.isPersonnel = false
				 	this.isMessage = false
					break
				case 'personnel':
					this.isMedical = false
				 	this.isFinancial = false
				 	this.isPerformance = false
				 	this.isPersonnel = true
				 	this.isMessage = false
					break
				case 'message':
					this.isMedical = false
				 	this.isFinancial = false
				 	this.isPerformance = false
				 	this.isPersonnel = false
				 	this.isMessage = true
				 	break
			}
			this.getUploadList(item)
		},
		// openNewWindow(id, name){ 
		//  window.open("/preview/"+id) 
		// },
		changeUploadStatusTips(){
			this.isShowUploadStatusTips = true;
			this.getUploadList("medical");
		},
		closeUploadStatusTips(){
			this.isShowUploadStatusTips =false;
		},
		getUploadList(gradeUnit){ //获得上传列表
			var qs = require('qs')
			var self = this
			axios.post('/service', qs.stringify({
					"data": JSON.stringify({
						command: 'getUploadInfo',
						platform: 'web',
						gradeUnit: gradeUnit, 
						monthTime: self.time,
						pageNum: 1
					})
				}))
				.then(function(response) {
					if(response.data.code == 10001){
						if(self.totalStatus = response.data.data.totalStatus == 1) {
							self.tableData = response.data.data.dataUpload;
							self.totalStatus = response.data.data.totalStatus
						} else {
							self.isShowUploadStatusTips = true
							self.tableData = response.data.data.dataUpload;
							self.totalStatus = response.data.data.totalStatus
							// self.time = '2018-01'
						}
						
					}else{

					}
				}).catch(function(error) {
					console.log(error);
			});
		},	
	}
}
</script>
<style lang="scss" scoped="">
	header{
		height: 76px;
		background: #2298D0;
		position: relative;
		ul{
			width: 510px;
			margin: 0 auto;
			display: block;
			padding-top: 30px;
			li{
				width: 170px;
				height: 46px;
				display: inline-block;
				float: left;
				line-height: 46px;
				color: #fff;
				font-size: 20px;
				cursor: pointer;
				text-align: center;
				transition: all .3s ease;
				&:hover {
					background: #65C2EE;
					color: #fff;
				}
			}
		}
		h1{
			float: left;
			width: 300px;
			img{
				position: absolute;
				left: 30px;
				top: 30px;
				width: 78px;
				height: 78px;
				border-radius: 50%;
			}
			span{
				font-size: 16px;
				color: #fff;
				display: inline-block;
				margin-left: 40%;
				margin-top: 45px;
			}
		}
		.button_operator{
			float: right;
			margin-left: 50px;
			margin-right: 20px;
			span{
				color: #fff;
				font-size: 20px;
			}
			.copy_fist{
				display: inline-block;
				margin-right: 30px;
				// vertical-align: middle;
				width: 80px;
				height: 40px;
				line-height: 40px;
				cursor: pointer;
				color: #fff;
				padding-left: 15px;
				padding-right: 5px;
				border-radius: 3px;
				position: relative;
				.geshi{
					position: absolute;
					top: 40px ;
					left: 0;
					background: #576F7A;
					width: 100px;
					padding: 0;
					height: 92px;
					text-align: center;
					z-index: 1111;
					li{
						height: 44px;
						line-height: 44px;
						width: 100%;
						font-size: 15px;
					}
					li:hover{
						background: #535B55 !important;
					}
				}
				img{
					float: left;
					margin-right: 10px;
					margin-top: 10px;
				}
			}
			.copy_ff{
				background: #fff;
				span{
					color: #2298D0 !important;
				}
				
			}
			.showUploadStatus{
				&:hover{
					cursor: pointer;
				}
			}
		}
		.logout{
			cursor: pointer;
			display: inline-block;
			vertical-align: middle;
		}
		.el-date-editor.el-input, .el-date-editor.el-input__inner{
			width: 150px !important;
			float: right;
			
		}
		.isActive {
			background: #fff !important;
			//border-bottom: 2px solid #2FA4Db;
			color: #2298D0;
			position: relative;
			&:hover {
				color: #2298D0;
			}
		}
		.isActive::after {
			content: "";
			display: inline-block;
			position: absolute;
			width: 0;
			height: 2px;
			background-color: #2298D0;
			bottom: 0;
			left: 25%;
			width: 50%;
			transition: all .3s ease;			
		}
		.isActive:hover::after {
			width: 0%;
			left: 25%
		}
		// .active {
		// 	background: #72BADC !important;
		// }
	}
		// .uploadStatusTipsContent{
		// 	width: 1200px;
		// 	height: 650px;
		// 	position: absolute;
		// 	margin-left: -600px;
		// 	margin-top: -326px;
		// 	left: 50%;
		// 	top: 50%;
		// 	background: #fff;
		// 	z-index: 9999;
			
			.uploadStatusTitle{
				font-size: 22px;
				color: #333333;
				text-align: center;
				margin-bottom: 40px;
			}
			.uploadStatusTitleInfo{
				ul{
					li{
						float: left;
						width: 152px;
						height: 55px;
						line-height: 55px;
						font-family: PingFangSC-Medium;
						font-size: 20px;
						color: #333333;
						text-align: center;
						box-shadow: 0 2px 6px 0 rgba(128,128,128,0.50);
						cursor: pointer;
						
						&:hover{
							background-color: #C7E3EE !important;
							color: #333333;
						}
					}
				}
			}
			.active {
				background-color: #C7E3EE !important;
				color: #333333;
			}
			.openNewWindow {
				text-align: left;
				a {
					text-decoration: underline;
					color: #333333;
					img {
						margin-right: 5px;
						position: relative;
						top: 5px;
					}
				}

			}
			.openNewWindow:hover{
				cursor: pointer;

			}
		// }
	
</style>